Overview

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. DataTables library is compatible with IE6 and newer. The extensions require IE8 or newer. All other evergreen browsers (Chrome, Firefox, Safari, Opera) are fully supported.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/tables/datatables/datatables.min.js"></script>

<!-- Add table -->
<table class="table datatable-basic">
	<thead>
		<tr>
			<th>...</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>...</td>
		</tr>
		...
	</tbody>
</table>

// Basic initialization
$('.datatable-basic').DataTable({
	autoWidth: false,
	dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
    language: {
        search: '<span>Filter:</span> _INPUT_',
        lengthMenu: '<span>Show:</span> _MENU_',
        paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
    },
    drawCallback: function () {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
    },
    preDrawCallback: function() {
        $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    }
});

Datatables extensions

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options. Extensions added to the Limitless configuration:

• AutoFill extension

  AutoFill adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed

• Buttons

  The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control

• ColReorder

  ColReorder adds the ability for the end user to be able to reorder columns in a DataTable through a click and drag operation. This can be useful when presenting data in a table, letting the user move columns that they wish to compare next to each other for easier comparison.

• FixedColumns

  FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column)

• FixedHeader

  The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible

• KeyTable

  KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells

• Responsive

  Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens

• RowReorder

  RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately

• Scroller

  A virtual renderer for DataTables, allowing the table to look like it scrolls for the full data set, but actually only drawing the rows required for the current display, for fast operation

• Select

  Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing

Datatables documentation

Full Datatables documentation can be found online on Official library website. It's quite big, with a lot of options, events and powerful API. Also check out Full reference and a complete manual. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Datatables library.

Overview

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. Have you ever wanted to show a lot of data in a table, but hate how badly it scales on smaller mobile devices? The FooTable jQuery plugin solves this problem by allowing you to hide certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden.

Usage

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/tables/footable/footable.min.js"></script>

<!-- Add table -->
<table class="footable">
	<thead>
		<tr>
			<th>Name</th>
			<th data-hide="phone,tablet">Phone</th>
			<th data-hide="phone,tablet">Email</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Bob Builder</td>
			<td>555-12345</td>
			<td>bob@home.com</td>
		</tr>
	</tbody>
</table>

// Basic initialization
$('.footable').footable({
	// options
});

Breakpoints

// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}

To change the breakpoints simply pass in a breakpoints option when initializing FooTable

// Change breakpoints
$('.footable').footable({
    breakpoints: {
        tiny: 100,
        medium: 555,
        big: 2048
    }
});

Column Setup

// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}

// Table markup
<table class="footable table">
	<thead>
		<tr>
			<th>Name</th>
			<th data-hide="phone">Job Title</th>
			<th data-hide="phone,tablet">Status</th>
			<th data-hide="all">Description</th>
		</tr>
	</thead>
</table>

In the above example the following will be true:

Data attributes

A list of all the options available on the float method:

Plugin events

There are a number of events that you can hook into:

Features

Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source with peak efficiency. It comes with powerful features like data validation, sorting, grouping, data binding, formula support or column ordering. Core features:

• Clean code with focus on performance allows you to interact with data sets ranging from 1 to 1 mln rows.
• Appearance similar to Excel allows you to present data in the desired way right on the spot. Edit the CSS file if you need a customized display.
• Maximize the value of your data by playing with it in real time. Integrate into any data source using flexible API.
• Divide large amounts of data into pieces and display small chunks of it in a user-friendly way.
• Lack of dependencies means the code works at its finest and is easy to implement in various enviroments.
• Integrates with our plugin, RuleJS , which supports most of the Excel functions and calculation capabilities.
• Helps user to shape data in accordance with different criteria. Operations are done on the fly.
• Tablet-friendly view with dedicated UI that simplifies editing and saving data. Easy navigation with on-screen arrow buttons.

Handsontable comprises of the core engine and functional plugins. You can find a complete list of them below:

Usage

<!-- Load library -->
<script type="text/javascript" src="assets/js/plugins/tables/handsontable/handsontable.min.js"></script>

<!-- Create container -->
<div id="example"></div>

// Add data
var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

// Define element
var container = document.getElementById('example');

// Initialize with options
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});

Handsontable documentation